<template>
  <div>
    <page-layout class="detail">
      <template>
        <a-card v-if="this.$route.query.finish">
          <a-button size="large" @click="$router.go(-1)">返回</a-button>
          <a-row style="margin-top: 20px">
            <a-col :span="12">
              <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-form-item label="需求名称">
                  <a-input
                    :value="detailData.title || '无'"
                    disabled
                    size="large"
                  />
                </a-form-item>
                <a-form-item label="所属部门">
                  <a-input
                    :value="detailData.department || '无'"
                    disabled
                    size="large"
                  />
                </a-form-item>
                <a-form-item label="发起人">
                  <a-input
                    :value="detailData.author.name || '无'"
                    disabled
                    size="large"
                  />
                </a-form-item>
              </a-form>
            </a-col>
            <a-col :span="12">
              <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-form-item label="审核人">
                  <a-input
                    :value="detailData.examiner || '无'"
                    disabled
                    size="large"
                  />
                </a-form-item>

                <a-form-item label="关联项目">
                  <a-input
                    :value="detailData.project || '无'"
                    disabled
                    size="large"
                  />
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
          <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="任务详情">
              <div
                style="
                  border: 1px solid #d9d9d9;
                  border-radius: 4px;
                  padding: 10px 10px;
                  min-height: 70px;
                "
                v-html="detailData.description || '无'"
              ></div>
            </a-form-item>
            <a-form-item label="附件">
              <a-empty
                v-if="!detailData.files || detailData.files.length === 0"
                description="暂无附件"
              ></a-empty>
              <div v-else class="enclosure-wrapper">
                <div
                  class="enclosure-item"
                  v-for="file in detailData.files"
                  :key="file.uid"
                >
                  <a-icon
                    type="file-zip"
                    theme="twoTone"
                    style="font-size: 50px"
                  />
                  <a
                    :href="
                      file.response &&
                      file.response.data &&
                      file.response.data.url
                    "
                    download
                    class="enclosure-content"
                    >{{ file.name }}</a
                  >
                </div>
              </div>
            </a-form-item>
          </a-form>
        </a-card>
        <a-row v-else style="margin: 0 -12px">
          <a-col
            style="padding: 0 12px"
            :xl="16"
            :lg="24"
            :md="24"
            :sm="24"
            :xs="24"
          >
            <a-card>
              <a-button
                size="large"
                @click="() => $router.push('/demand/processing')"
              >
                返回
              </a-button>
              <h1 class="detail-title">
                {{ detailData.title || "未命名需求" }}
                <a-button
                  v-if="userInfo.permissions.requirement_Addchange"
                  type="danger"
                  style="margin-left: 60px"
                  @click="showRequirementChangeModal"
                >
                  需求变更
                </a-button>
                <a-button
                  v-if="userInfo.permissions.requirements_accept"
                  type="primary"
                  style="margin-left: 10px"
                  @click="success(detailData.requirement_id)"
                >
                  验收
                </a-button>
                <a-dropdown
                  v-if="
                    detailData.status < 6 &&
                    userInfo.permissions.requirements_suspend
                  "
                >
                  <a-menu slot="overlay" @click="handleMenuClick">
                    <a-menu-item
                      key="2"
                      style="color: yellowgreen"
                      v-if="detailData.status < 2"
                    >
                      <a-icon type="check" />通过需求
                    </a-menu-item>
                    <a-menu-item
                      key="5"
                      style="color: red"
                      v-if="detailData.status < 6"
                    >
                      <a-icon type="close" />中止需求
                    </a-menu-item>
                  </a-menu>
                  <a-button style="margin-left: 8px">
                    审核 <a-icon type="down" />
                  </a-button>
                </a-dropdown>
                <a-button v-else style="margin-left: 10px"
                  >该需求已中止</a-button
                >
              </h1>
              <p></p>
              <p style="padding-left: 60px">
                <a-popover placement="topLeft">
                  <template slot="content">
                    <h5>所属部门</h5>
                  </template>
                  <a-icon type="home" /> {{ detailData.department }}
                </a-popover>
                <a-popover placement="topRight">
                  <template slot="content">
                    <h5>负责人员</h5>
                  </template>
                  <a-icon type="user" style="margin-left: 50px" /><a
                    v-if="detailData.author"
                  >
                    {{ detailData.author.name }}</a
                  >
                </a-popover>
              </p>
            </a-card>
            <a-card
              style="margin-top: 10px; margin-bottom: 10px"
              :loading="pageLoading"
            >
              <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane key="1" tab="跟进">
                  <!-- 数据为空时展示 -->
                  <!-- <a-empty v-if="false" description="暂无跟进" /> -->
                  <a-timeline>
                    <a-timeline-item style="height: 50px">111 </a-timeline-item>
                    <a-timeline-item>
                      <div class="content-wrapper">
                        <div class="year">
                          {{ new Date().getFullYear() }}
                        </div>
                        <div class="time-line">
                          <div>
                            {{ new Date().getMonth() + 1 }}-{{
                              new Date().getDate()
                            }}
                          </div>
                          <div>
                            {{ new Date().getHours() }}:{{
                              new Date().getMinutes()
                            }}
                          </div>
                        </div>
                        <div class="time-content">
                          <a-form :form="formPublish" @submit="handlePublish">
                            <a-form-item>
                              <a-row style="width: 100%">
                                <a-col :span="16">
                                  <a-textarea
                                    size="large"
                                    placeholder="发布跟进记录"
                                    :autoSize="{ minRows: 2 }"
                                    v-decorator="[
                                      'remark',
                                      {
                                        rules: [
                                          {
                                            required: true,
                                            message: '请输入跟进记录!'
                                          }
                                        ]
                                      }
                                    ]"
                                  />
                                </a-col>
                                <a-col :span="8">
                                  <a-button
                                    type="primary"
                                    html-type="submit"
                                    style="
                                      margin-left: 13px;
                                      height: 50px;
                                      width: 100px;
                                    "
                                  >
                                    发布
                                  </a-button>
                                </a-col>
                              </a-row>
                            </a-form-item>
                          </a-form>
                        </div>
                      </div>
                    </a-timeline-item>
                    <a-timeline-item
                      v-for="item in detailData.requirement_logs"
                      :key="item.id"
                      color="gray"
                    >
                      <div class="content-wrapper">
                        <div class="year">
                          {{ item.created_at.split(" ")[0].split("-")[0] }}
                        </div>
                        <div class="time-line">
                          <div>
                            {{ item.created_at.split(" ")[0].split("-")[1] }}-{{
                              item.created_at.split(" ")[0].split("-")[2]
                            }}
                          </div>
                          <div>
                            {{ item.created_at.split(" ")[1].split(":")[0] }}:{{
                              item.created_at.split(" ")[1].split(":")[1]
                            }}
                          </div>
                        </div>
                        <div class="time-content">
                          <div class="time-content-wrapper">
                            <div>
                              <div class="title" v-html="item.remark">
                                
                              </div>
                              <div class="name">操作人：{{ item.linkman }}</div>
                            </div>
                            <div>
                              <a-button
                                @click="deleteLog(item.id)"
                                shape="circle"
                                icon="delete"
                              >
                              </a-button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </a-timeline-item>

                    <a-timeline-item color="gray"> 222 </a-timeline-item>
                  </a-timeline>
                </a-tab-pane>
                <a-tab-pane key="2" tab="附件" force-render>
                  <div class="enclosure-wrapper">
                    <div
                      class="enclosure-item"
                      v-for="file in detailData.files"
                      :key="file.uid"
                    >
                      <a-icon
                        type="file-zip"
                        theme="twoTone"
                        style="font-size: 50px"
                      />
                      <a
                        :href="file.response.data.url"
                        download
                        class="enclosure-content"
                        >{{ file.name }}</a
                      >
                    </div>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="需求详情" force-render>
                  <a-card>
                    <div v-html="detailData.description || '无'"></div>
                  </a-card>
                </a-tab-pane>
              </a-tabs>
            </a-card>
          </a-col>
          <a-col
            class="left-wrapper"
            :xl="8"
            :lg="24"
            :md="24"
            :sm="24"
            :xs="24"
          >
            <a-card style="width: 100%" :loading="pageLoading">
              <!-- <a-card-meta> -->
              <div class="title-wrapper">
                <a-avatar
                  v-if="detailData.author"
                  class="avatar"
                  slot="avatar"
                  :style="{
                    backgroundColor:
                      avatarColor[
                        detailData.author ? detailData.author.name.length : 1
                      ],
                    verticalAlign: 'middle'
                  }"
                  >{{
                    detailData.author
                      ? detailData.author.name.slice(0, 1)
                      : "未知姓名".slice(0, 1)
                  }}
                </a-avatar>
                <div class="avatar-title" v-if="detailData.author">
                  <div>
                    {{ detailData.author.name || "未知姓名" }}
                  </div>
                  <div>
                    添加于：{{
                      (detailData.author.name &&
                        detailData.author.created_at) ||
                      "时间未知"
                    }}
                  </div>
                </div>
              </div>
              <!-- </a-card-meta> -->
            </a-card>
            <a-card
              style="margin-top: 10px; width: 100%"
              :loading="pageLoading"
            >
              <a-row>
                <a-col :span="12" class="add-person">
                  <!-- <div class="icon-wrapper">
                  <a-icon type="plus"></a-icon>
                </div> -->
                  <a-button
                    class="icon-wrapper"
                    shape="circle"
                    icon="plus"
                    @click="handelAdd"
                  >
                  </a-button>
                  <span>添加联系人</span>
                </a-col>
                <a-col
                  :span="12"
                  class="add-person"
                  style="border-left: 1px solid #ddd"
                  v-if="detailData.project_id === ''"
                >
                  <a-button
                    class="icon-wrapper"
                    shape="circle"
                    icon="link"
                  ></a-button>
                  <span>暂无关联</span>
                </a-col>
                <a-col
                  v-else
                  :span="12"
                  class="add-person"
                  style="border-left: 1px solid #ddd"
                >
                  <!-- <div class="icon-wrapper">
                  <a-icon type="link"></a-icon>
                </div> -->
                  <a-button
                    class="icon-wrapper"
                    shape="circle"
                    icon="link"
                    @click="() => (visible = true)"
                  ></a-button>
                  <span>关联项目</span>
                </a-col>
              </a-row>
            </a-card>
            <a-card
              style="margin-top: 10px; width: 100%"
              :loading="pageLoading"
            >
              <a-empty
                v-if="detailData.team && detailData.team.length === 0"
                description="没有联系人"
              />
              <template v-else>
                <a-list
                  v-if="detailData.team"
                  style="height: 360px; overflow: auto"
                  :data-source="detailData.team"
                >
                  <a-list-item slot="renderItem" slot-scope="item">
                    <div class="title-wrapper">
                      <a-avatar
                        class="avatar"
                        slot="avatar"
                        :style="{
                          backgroundColor:
                            avatarColor[
                              item.username ? item.username.length : 1
                            ],
                          verticalAlign: 'middle'
                        }"
                        >{{
                          item.username
                            ? item.username.slice(0, 1)
                            : "未知姓名".slice(0, 1)
                        }}
                      </a-avatar>
                      <div class="avatar-title">
                        <div>
                          {{ item.username || "未知姓名" }}
                        </div>
                        <div>
                          电话：{{ item.phone || "无" }} | 邮箱：{{ item.email || "无" }}
                        </div>
                        <div></div>
                      </div>
                    </div>
                  </a-list-item>
                </a-list>
              </template>
            </a-card>
          </a-col>
        </a-row>
      </template>
    </page-layout>
    <a-modal
      ref="model1"
      v-model="contactsVisible"
      title="添加联系人"
      @cancel="handleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          添加
        </a-button>
      </template>
      <a-form
        id="components-form-demo-normal-login"
        ref="contacts"
        :form="form2"
        class="login-form"
        v-bind="{
          labelCol: { span: 6 },
          wrapperCol: { span: 14 }
        }"
      >
        <a-form-item label="联系人姓名">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入联系人姓名!' }]
              }
            ]"
            placeholder="联系人姓名"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="手机号码">
          <a-input
            v-decorator="[
              'phone',
              {
                rules: [{ required: true, message: '请输入手机号码!' }]
              }
            ]"
            placeholder="手机号码"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input
            v-decorator="[
              'email',
              {
                rules: [{ required: true, message: '请输入邮箱!' }]
              }
            ]"
            placeholder="邮箱"
          >
          </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      ref="model1"
      v-model="visible"
      title="关联的项目信息"
      :width="800"
      :footer="null"
    >
      <a-row style="margin-top: 20px">
        <a-col :span="12">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="项目名称">
              <a-input
                :value="projectData.title || '无'"
                disabled
                size="large"
              />
            </a-form-item>
            <a-form-item label="创建者">
              <a-input
                :value="projectData.author_name || '无'"
                disabled
                size="large"
              />
            </a-form-item>
            <a-form-item label="所属部门">
              <a-input
                :value="projectData.department_name || '无'"
                disabled
                size="large"
              />
            </a-form-item>
            <a-form-item label="开始时间">
              <a-input
                :value="projectData.start_time || '无'"
                disabled
                size="large"
              />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="12">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="项目状态" :class="{ green: false, blue: true }">
              <a-input
                :value="projectData.status_name || '无'"
                disabled
                size="large"
              />
              <!-- {{ projectData }} -->
            </a-form-item>
            <a-form-item label="开发团队">
              <a-input
                v-if="projectData"
                :value="projectData.team || '无'"
                disabled
                size="large"
              />
            </a-form-item>
            <a-form-item label="结束时间">
              <a-input
                :value="projectData.end_time || '无'"
                disabled
                size="large"
              />
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="项目详情">
          <div
            style="
              border: 1px solid #d9d9d9;
              border-radius: 4px;
              padding: 10px 10px;
              min-height: 70px;
            "
            v-html="projectData.introduce || '无'"
          ></div>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="需求变更"
      :visible="requirement_visible"
      :confirm-loading="changeConfirmLoading"
      :width="800"
      @ok="changeHandleOk"
      @cancel="changeHandleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="changeHandleCancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="changeHandleOk"
        >
          添加
        </a-button>
      </template>
      <a-form
        id="requirement_change"
        ref="requirement_change"
        :form="form3"
        class="login-form"
        v-bind="{
          labelCol: { span: 6 },
          wrapperCol: { span: 14 }
        }"
      >
        <a-form-item label="变更内容" width:600>
          <EditorBar
            v-decorator="[
              'content',
              {
                rules: [{ required: true, message: '请输入变更内容!' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="附件">
          <a-upload-dragger
            v-decorator="[
              'files',
              {
                valuePropName: 'fileList',
                getValueFromEvent: normFile
              }
            ]"
            name="file"
            :multiple="false"
            action="/commons/qiniu_uploadFile"
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" style="color: #dddddd" />
            </p>
            <!-- <p class="ant-upload-text">点击或者拖拽文件来上传你的附件</p> -->
            <p class="ant-upload-hint" style="color: #ccc">
              点击或者拖拽文件来上传附件
            </p>
          </a-upload-dragger>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
// eslint-disable-next-line no-unused-vars
import {
  detail,
  addLink,
  linkLog,
  logDelete,
  addChange,
  suspend,
  accept
} from "@/services/demand";
import projects from "@/services/projects";
import { mapState } from "vuex";
import EditorBar from "@/components/wangEditor";
export default {
  // name: "demand",
  components: { PageLayout, EditorBar },
  data() {
    return {
      userInfo: [],
      requirement_visible: false,
      changeConfirmLoading: false,
      formPublish: this.$form.createForm(this, { name: "progress" }),
      form2: this.$form.createForm(this, { name: "contacts" }),
      form3: this.$form.createForm(this, { name: "requirement_change" }),
      contactsVisible: false,
      visible: false,
      loading: false,
      mockData: [],
      targetKeys: [],
      detailData: {},
      projectData: {},
      pageLoading: true
    };
  },
  mounted() {
    let userInfo = JSON.parse(window.localStorage.getItem("admin.user"));
    this.userInfo = userInfo;
    console.log(this.userInfo);
    this.getDetailData();
  },
  authorize: {
    deleteRecord: "delete"
  },
  computed: {
    ...mapState("setting", {
      avatarColor: (state) => state.avatarColor
    })
  },
  methods: {
    handleMenuClick(e) {
      let key = e.key;
      let requirement_id = this.detailData.requirement_id;
      suspend({ key, requirement_id }).then((res) => {
        if (res.data.code === 20000) {
          this.getDetailData();
        }
      });
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    handleChange(info) {
      const status = info.file.status;
      if (status !== "uploading") {
      }
      if (status === "done") {
        // 服务端返回状态码不为 20000 时
        if (info.file.response.code !== 20000) {
          this.$message.error(info.file.response.message);
          this.form.setFieldsValue({ files: info.fileList.splice(-1, 1) });
          return false;
        }
        this.$message.success(`${info.file.name} 上传成功~`);
      } else if (status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    success(requirement_id) {
      this.$confirm({
        title: "需求验收",
        content: "确认验收完成该需求？",
        onOk:()=>{
          accept({ requirement_id }).then((res) => {
            if (res.data.code === 20000) {
              this.$router.push('/demand/processed');
            }
          });
        },
        onCancel() {}
      });
    },
    showRequirementChangeModal() {
      this.requirement_visible = true;
    },
    //添加需求变更确认
    changeHandleOk() {
      this.form3.validateFields((err, values) => {
        if (!err) {
          this.requirement_visible = false;
          addChange({ ...values, requirement_id: this.$route.query.id }).then(
            (res) => {
              if (res.data.code === 20000) {
                this.$message.success(res.data.message);
                this.form3.resetFields();
                this.getDetailData();
              }
            }
          );
        }
      });
      this.ModalText = "The modal will be closed after two seconds";
      this.changeConfirmLoading = true;
      setTimeout(() => {
        this.requirement_visible = false;
        this.changeConfirmLoading = false;
      }, 2000);
    },
    changeHandleCancel() {
      this.requirement_visible = false;
    },
    handelAdd() {
      this.contactsVisible = true;
    },
    callback(key) {
      console.log(key);
    },
    //发布进度
    handlePublish(e) {
      e.preventDefault();
      this.formPublish.validateFields((err, values) => {
        if (!err) {
          // addLink({ ...values, requirement_id: this.$route.query.id });
          linkLog({ ...values, id: this.$route.query.id }).then((res) => {
            if (res.data.code === 20000) {
              this.formPublish.resetFields();
              this.$message.success(res.data.message);
            }
          });
          this.getDetailData();
        }
      });
    },
    deleteLog(id) {
      logDelete({ log_id: id }).then((res) => {
        if (res.data.code === 20000) {
          this.$message.success(res.data.message || "删除成功~", () =>
            this.getDetailData()
          );
        }
      });
    },
    // 添加联系人取消
    handleCancel() {
      this.form2.resetFields();
      this.contactsVisible = false;
    },
    // 添加联系人确认
    handleOk() {
      this.form2.validateFields((err, values) => {
        if (!err) {
          this.contactsVisible = false;

          addLink({ ...values, requirement_id: this.$route.query.id }).then(
            (res) => {
              if (res.data.code === 20000) {
                this.$message.success(res.data.message);
                this.form2.resetFields();
                this.getDetailData();
              }
            }
          );
        }
      });
    },
    getDetailData() {
      // detail(this.$route.query.id).then((res) => {
      detail(this.$route.query.id).then((res) => {
        this.pageLoading = false;
        this.detailData = res.data.data;

        this.detailData.project_id &&
          projects.detail(this.detailData.project_id || 1).then((res) => {
            this.projectData = res.data.data;
            this.projectData.team = this.projectData.team.reduce(
              (total, currentValue, currentIndex) => {
                if (currentIndex === 0) total = total + currentValue.name;
                else total = total + "," + currentValue.name;
                if (total.length > 10) total = total.slice(0, 10) + "...";
                return total;
              },
              ""
            );
          });
      });
    }
  }
};
</script>

<style lang="less">
.ant-input[disabled] {
  color: #333333;
  background-color: #fff;
  font-size: 16px;
}
.blue {
  .ant-input[disabled] {
    color: #2591ff;
    background-color: #fff;
    font-size: 16px;
  }
}
.green {
  .ant-input[disabled] {
    color: #00ca13;
    background-color: #fff;
    font-size: 16px;
  }
}
.detail {
  font-family: " Microsoft YaHei";
  .ant-tabs-nav {
    font-size: 18px;
  }
  .ant-timeline {
    padding-left: 100px;
    height: 400px;
    overflow-y: auto;
  }
  .ant-timeline-item:first-child .ant-timeline-item-head,
  .ant-timeline-item:first-child .ant-timeline-item-content,
  .ant-timeline-item:last-child .ant-timeline-item-head,
  .ant-timeline-item:last-child .ant-timeline-item-content {
    display: none;
  }
  .ant-timeline-item-tail {
    border-left-color: #0097e0;
  }
  .content-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-start;
    color: #999999;
    .year {
      position: absolute;
      top: 0;
      left: -70px;
    }
    .time-line {
      flex: 1;
      padding-left: 18px;
    }
    .time-content {
      flex: 5;
      background: #f3fbff;
      padding: 20px 9px;
      line-height: 20px;

      .time-content-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 30px;
      }
      .ant-form-item {
        margin-bottom: 0;
      }
      .title {
        color: #666666;
        margin-bottom: 10px;
      }
    }
  }
  .detail-title {
    display: inline-block;
    margin-left: 40px;
    font-size: 24px;
  }
  .title-wrapper {
    display: flex;
    .avatar {
      height: 46px;
      width: 46px;
      line-height: 46px;
      margin-right: 50px;
    }
    .avatar-title {
      div:first-child {
        color: #333333;
        font-size: 16px;
        margin-bottom: 5px;
      }
      div:nth-child(2) {
        color: #999999;
        font-size: 14px;
      }
    }
  }
  .add-person {
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    .icon-wrapper {
      width: 40px;
      height: 40px;
      // line-height: 40px;
      // text-align: center;
      // box-shadow: 0px 1px 5px 0px rgba(0, 7, 40, 0.15);
      // border-radius: 50%;
      margin-right: 9px;
      color: #0197e0;
    }
  }

  .enclosure-wrapper {
    display: flex;
    margin-top: 15px;
    flex-wrap: wrap;
    justify-content: flex-start;
    // align-content: space-between;
    .enclosure-item {
      margin-left: 30px;
      // margin-top: 20px;
      width: 10%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-content: center;
      text-align: center;
      .enclosure-content {
        margin-top: 15px;
      }
    }
  }
}
</style>
